<template>
  <div class="headNav fix" :class="{'fixed':fixed}">
    <div class="img" @click="headBack">
      <!--<i class="iconfont icon-llmainpageback"></i>-->
    </div>
    <div class="centerTitle ell">
      {{centerTitle}}
      <!--<span v-text="centerTitle" class="ell"></span>-->
      <!--<input type="text" class="centerTitle ell" v-model="centerTitle" readonly/>-->
    </div>
    <img class="imageSrc" v-if="imageSrc" :src="imageSrc">
    <div class="rightTitle" v-text="rightTitle" :class="rightClass" @click="rightClick">
    </div>
  </div>
</template>
<style lang="scss" rel="stylesheet/scss" scoped>
  input{
    background-color: rgba(0,0,0,0);
    color: #fff;
    text-align: center;
  }
  .img{
    float: left;
    width: 1.7rem;
    height: 2.2rem;
    line-height: 2.2rem;
    text-align: left;
    background: url('../assets/images/back.png') no-repeat left center;
    background-size: .6rem 1.1rem;
  }
  .fixed{
    position: fixed;
    z-index: 9;
    left: 0;
    right: 0;
    top: 0;
  }
  .headNav {
    display: flex;
    background: rgba(70, 161, 187, 1);
    background-size: cover;
    height: 2.2rem;
    padding: 0 .75rem;
    box-sizing: border-box;

  >.img{
     height: 2.2rem;
     flex: 0 0 20%;
     position: relative;
     float: left;
   }
  >.centerTitle{
     color: white;
     font-size: .9rem;
     flex: 1;
     text-align: center;
     line-height: 2.2rem;
     height: 2.2rem;
   }
  >.rightTitle{
     flex:  0 0 20%;
     height: 2.2rem;
     font-size: .8rem;
     text-align: right;
     line-height: 2.2rem;
     color: white;
   }
  >.imageSrc{
     float: right;
  	 margin-top: .55rem;
     width: 1.1rem;
     height: 1.1rem;
   }
  }
  .centerTitle input{
    font-size: .85rem;
  }
</style>
<script>

  export default{
    props: {
    	imageSrc:'',
      centerTitle:'',
      rightTitle:'',
      fixed:{
        default:true,
      },
      back:null
    },
    data(){
      return {
      }
    },
    methods: {
      headBack(){
        this.$emit('headBack');
      },
      rightClick(){
        this.$emit('rightClick');
      }
    }

  }
</script>
